<template>
  <div>
    <div class="topbar" v-if="showTop">
      <div class="back" @click="close">
        <i class="icon el-icon-arrow-left"></i>
        <span class="txt">返回</span>
      </div>
      <div class="title">打印标签</div>
      <el-button type="primary" size="small" @click="printIt">打印</el-button>
    </div>
    <div ref="content">
      <print-tag-block v-for="row in rows" :data="row" :model="model" style="margin-bottom: 20px;width: 300px;margin-right: 20px;"></print-tag-block>
    </div>
  </div>
</template>

<script setup>

import api from '@/api/asset/assetItem.js'
import { printDom } from '@/utils/print.js'
import modelApi from '@/views/asset/settings/tag/api.js'
import PrintTagBlock from "@/views/asset/assetItem/PrintTagBlock.vue";

  const route = useRoute();
  const query = route.query;
  const ids = query.id.split(',');
const rows = ref({});

  const model = ref();
  const content = ref();
  const showTop = ref(true);


  function getModel() {
    modelApi.getSelect().then((res) => {
      model.value = res;
    })
  }

  function close() {
    window.close();
  }

  function printIt() {
    showTop.value = false;

    nextTick(()=> {
      window.print();
      setTimeout(()=> {
        showTop.value = true;
      }, 2000);
    })
  }

api.getAssetItemListByIds(ids).then((res) => {
  rows.value = res;
})

getModel();

</script>

<style rel="stylesheet/scss" lang="scss">
.topbar {
  width: 100%;
  height: 40px;
  background-color: #fff;
  box-shadow: 0 2px 8px #e1e2e4;
  box-sizing: border-box;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

@media print {
  .topbar {
    display: none;
  }
}

</style>
